<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
	    <link rel="stylesheet" type="text/css" href="../../css/home/home.css">
	    <link rel="stylesheet" type="text/css" href="../../css/xianqing.css">
	</head>
	<body>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav" style="background: #40CC8B;">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#FFF6E8;"></a>
		    <h1 class="mui-title" style="color: #FFF6E8;">书籍详情</h1>
		</header>
		
		<div class="mui-content">
			<div class="commodity">
				<div class="commodity-commodity">
					<div class="commodity-commodity-nav">
					<span>商品</span>
					 <span>详情</span>
					 <span>评论</span>
					</div>
				</div>
							<!--轮播-->
			<div id="slider" class="mui-slider"  >
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate" >
						<a href="#">
							<img src="../../imges/430450982235783268.png" />
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../imges/230451820479512246.jpg" />
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../../imges/230451820479512246.jpg" />
						</a>
					</div>
					<!-- 第三张 -->
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../../imges/230451820479512246.jpg" />
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
				</div>
			</div> 
		 </div>
		<!-- 副标题-->
		<div class="Subtitle">
			<h4 style="color: #7F7F7F;">副标题</h4>
			<p>副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题</p>
			<div>
				<span style="font-size:14px; color: brown;">$18.80元</span>
				<span style="font-size:18px; color: brown; float:right;;">$18.80元</span>
		   </div>
		</div>	
			<!--五星-->
			<div class="Wuxing">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#FFF6E8; font-size: 30px; line-height: 80px;float: right;"></a>
			   <span style="color: #7F7F7F;">评分评论</span><span style="color: brown;">（90%)</span>
			   <img src="../../imges/Path 628.png">
			    <img src="../../imges/Path 628.png">
			     <img src="../../imges/Path 628.png">
			      <img src="../../imges/Path 628.png">
			       <img src="../../imges/Path 628.png">
			   <div>
			   	<!--<img src="../../imges/Path 628.png">
			   <img src="../../imges/Path 628.png">
			   <img src="../../imges/Path 628.png">-->
			   </div>
			 </div>
			<!--详情-->
			<div class="details">
				<p>I内容介绍</p>
				<a>I编辑推荐</a><br>
				<a>I作者简介</a><br>
				<a>I出版社</a><br>
				<a>I出版社</a><br>
			</div>
			
			<div class="footer">
				<div class="mui-btn mui-btn-primary" id="btnaa1" >
					微店购买
				</div>
				<span class="mui-btn mui-btn-success " id="btnaa2">
					加入我的书架
				</span>
			</div>
			
		    
		
		</div>
		<div class="prompt">
			
			<div class="prompt_noclass" style="line-height: 180px;">成功加入我的书架</div>
		</div>
		<p>将在 <span id="mes">5</span> 秒钟后返回首页！</p> 
		<script src="../../js/mui.min.js"></script>
		
		
		
		
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/common/common.js"></script>
		<script>
			
			
			
			
    /*
     *  1.闪烁效果（瞬间将宽高都变为0，scale，并且是随机的）
     *  2.图片从小到大，同时透明度从1变成0（必须是当前图片上一步效果走完了，才会开始）
     *  3.图片旋转，同时透明度从0变成1，有层次感（位移translate）（当所有图片透明度都变为0的时候，才会开始）
     */
     window.onload=function(){
        var btn=document.getElementById('btn');
        var imgs=document.querySelectorAll('body');
        var allEnd=0;//用来判断所有的图片是否都完成了所有的运动步骤
        var on=true;//用来决定用户是否可以再次点击

        //给btn添加点击事件
       
            console.log("on:"+on);
            if(!on){
                return;
            }
            on=false;
            var endNum=0;//运动完成的图片数量

            for(var i=0;i<imgs.length;i++){
                //写成自执行函数的原因：for循环速度很快，将会导致setTimeout中的i找不到值
                (function(i){
                    setTimeout(function(){
                        montion(imgs[i],'10ms',function(){
                            this.style.transform='scale(0)';//因为函数用了call函数，所以可以用this，否则只能用imgs[i]
                        },function(){
                            //第二步的运动从这里开始
                            montion(this,'1s',function(){
                                this.style.transform="scale(1)";
                                this.style.opacity=0;
                            },function(){
                                endNum++;//只要有一张图片完成了第二步，则加1
                                if(endNum===imgs.length){
                                    toBig();
                                }
                            })
                        });
                    },Math.random()*1000);
                })(i);

            }
            //定时器，用来延迟时间，不让图片同步所放
       
        //第三个运动效果
        function toBig(){
            /*
             *坐标轴，x,y,z
             */
             for(var i=0;i<imgs.length;i++){
                imgs[i].style.transition='';
                // imgs[i].style.opacity='1';
                //想要一个物体有css3中的动作变化，那就需要给它一个初始值
                imgs[i].style.transform='rotateY(0deg) translateZ(-'+Math.random()*500+'px)';
                //自执行函数的目的是，为了找到i，否则for循环执行太快，会找不到i
                (function(i){
                    setTimeout(function(){
                        montion(imgs[i],'2s',function(){
                            this.style.opacity=1;
                            this.style.transform='rotateY(-360deg) translateZ(0)'
                        },function(){
                            allEnd++;
                            if(allEnd===imgs.length){
                                console.log("allEnd:"+allEnd+',imgs.length:'+imgs.length);
                                //这个条件成立，说明所有的图片都运动完了，接下来才允许再次点击
                                //当所有运动完了以后，才允许再次点击
                                on=true;
                                allEnd=0;
                            }
                        });
                    },Math.random()*1000);
                })(i);
             }
        }

        //运动函数(运动的对象，运动的时间，运动的属性函数，运动完成后要做的事情)
        function montion(obj,time,doFn,callBack){
            obj.style.transition=time;
            doFn.call(obj);//调用函数，并且把this的指向给obj

            var called=false;//这里的原因是为了解决transitionend调用多次的bug

            obj.addEventListener('transitionend',function(){
                if(!called){
                    callBack&&callBack.call(obj);//解决如果没有传入第四个callBack参数的问题
                    called=true;
                }

            },false);//事件三阶段，第三个参数决定是在捕获阶段还是冒泡阶段，调用此函数,false代表是在冒泡阶段
        }
     }
   
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			var mask = mui.createMask(callback);
			//遮罩层
			$("#btnaa2").on("tap", function() {
				mask.show();
				document.getElementsByClassName("prompt")[0].style.display = "block"
			})
                         
			function callback() {
				document.getElementsByClassName("prompt")[0].style.display = "none"
			}
			$(".prompt_close").on("tap", function() {
				callback()
				mask.close()
			})
			
			
			
			var lunbo = mui('#slider');
			lunbo.slider({
				interval:200,
			});
			
			
			var i = 5; 
var intervalid; 
intervalid = setInterval("fun()", 1000); 
function fun() { 
if (i == 0) { 
common.open("my.html")
clearInterval(intervalid); 
} 
document.getElementById("mes").innerHTML = i; 
i--; 
} 
		</script>
	</body>
</html>
